/*
 * @Author: xiaosihan 
 * @Date: 2024-06-25 14:11:53 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-06-25 15:23:32
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./topContorl.module.less";
import x_axisPNG from "./x_axis.png";
import y_axisPNG from "./y_axis.png";
import z_axisPNG from "./z_axis.png";
import outlinePNG from "./outline.png";
import model3dRender from "../model3dRender";

interface Iprops {
    children?: ReactNode
}

// 顶部控制器
export default function TopContorl() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }), []);

    return (
        <div className={styles.topContorl} >
            <img
                alt=""
                className={styles.icon}
                src={x_axisPNG}
                onClick={() => model3dRender.lookAtX()}
            />
            <img
                alt=""
                src={y_axisPNG}
                className={styles.icon}
                onClick={() => model3dRender.lookAtY()}
            />
            <img
                alt=""
                src={z_axisPNG}
                className={styles.icon}
                onClick={() => model3dRender.lookAtZ()}
            />
            <img
                alt=""
                src={outlinePNG}
                className={styles.icon}
                onClick={() => model3dRender.lookAtDefault()}
            />
        </div>
    );

}